<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理
            <small>修改密码管理</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改密码管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box" align="center">
            <div class="filter-container" style="width: 300px; margin: 100px 200px 60px 200px;">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="loginName">
                        <el-input v-model="ruleForm.loginName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="旧密码" prop="old">
                        <el-input id="old" v-model="ruleForm.old" type="password" @blur="validateOld"></el-input><span id="msg" style="font-size: 10px;color: red;"></span>
                    </el-form-item>
                    <el-form-item label="新密码" prop="password">
                        <el-input v-model="ruleForm.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="again">
                        <el-input v-model="ruleForm.again" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: {
                    loginName: '',
                    old: '',
                    password: '',
                    again: ''
                },
                rules: {
                    old: [
                        { required: true, message: '请输入旧密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                    again: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ]
                }
            };
        },
        created() {
            this.getLoginName();
        },
        methods: {
            getLoginName() {
                axios.get(`/login/getLoginName.do`).then(response => {
                    this.ruleForm.loginName = response.data.loginName;
                });
            },
            validateOld() {
                axios.post(`/admin/validateOldPwd.do`, this.ruleForm).then(response => {
                    if (response.data == 0) {
                        document.getElementById("msg").innerHTML="旧密码不正确";
                        document.getElementById("old").focus();
                    }else {
                        document.getElementById("msg").innerHTML="";
                    }
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //alert(this.ruleForm.password);
                        if (this.ruleForm.password != this.ruleForm.again) {
                            alert("两次密码输入不一致")
                            return false;
                        }
                        axios.post(`/admin/updatePassword.do`,this.ruleForm).then(response=>{
                            if (response.data === 0) {
                                alert("密码修改失败！");
                            }else {
                                alert("密码修改成功！");
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    })
</script>
</html>
